<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账号管理</title>

    <link rel="stylesheet" th:href="@{/css/layui.css}">
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
    <script th:src="@{/js/layui.js}"></script>

</head>
<body>

<div id="container" class="layui-fluid">


    <div>
        <h1 style="text-align: center;font-size: 20px;font-weight: bolder;margin-top: 20px">用户账号密码表</h1>
    </div>

    <table id="table" lay-filter="tableList" style="margin-top: 10px">

    </table>
</div>
</body>


<script th:inline="none">


    let vue = new Vue({
        el: '#container',
        data: {
            date: new Date()
        },
        methods: {},
        mounted: function () {

        }

    })

    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#table'
            , url: "/manager/account"
            , cols: [[
                {field: 'id', title: "用户编号",width:'15%'},
                {field: 'username', title: "用户名",width:'20%'},
                {field: 'password', title: "密码(密文)",width:'30%'},
                {field: 'name', title: "名字",width:'15%'},
                { align: 'center', toolbar: '#barDemo',width:'20%'}
            ]],
            where: {
                date: vue.$data.date.toUTCString()
            }
            , parseData: function (res) {
                var list = [];
                for (var i = 0; i < res.list.length; i++) {
                    var username = res.list[i].username;
                    var id = res.list[i].userInfo.id;
                    var password = res.list[i].password;
                    var name = res.list[i].userInfo.name;
                    list.push({"username": username, "id": id, "password": password, "name": name})
                }
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.total,
                    "data": list
                }
            },
            page: true
            , limit: 5
            , limits: [5, 10, 20, 30]
        })


        table.on('tool(tableList)', function (obj) {
            var data = obj.data;

            if ('edit' == obj.event) {
                var conent = 'http://localhost:8080/manager/update?username=' + data.username + "&password=" + data.password;

                layer.open({
                    type: 2,
                    area: ['500px', '300px'],
                    content: conent,
                    closeBtn: 2,
                    shadeClose: true,
                    title: "修改用户的密码",
                    resize: false,
                    anim: 0,
                    end: function () {
                        axios({
                            url: 'http://localhost:8080/check',
                            method: 'get',
                            params: {
                                username: data.username
                            }
                        }).then((response) => {
                            obj.update({
                                password: response.data.password
                                , title: "(密文)"
                            });
                        })
                    }
                })
            } else if ('del' == obj.event) {

                layer.confirm('确定删除吗?', function (index) {
                    layer.close(index);
                    //向服务端发送删除指令
                    var data = new FormData();
                    data.append("username", obj.data.username);
                    data.append("_method", "delete");
                    axios({
                        url: 'http://localhost:8080/manager/delete',
                        method: 'post',
                        data: data
                    }).then((response) => {

                        // console.log(response.data)
                        let str = '删除成功!'
                        layer.alert(str, {
                            time: 3000
                        })
                        table.render({
                            elem: '#table'
                            , url: "/manager/account"
                            , cols: [[
                                {field: 'id', title: "用户编号",width:'15%'},
                                {field: 'username', title: "用户名",width:'20%'},
                                {field: 'password', title: "密码(密文)",width:'30%'},
                                {field: 'name', title: "名字",width:'15%'},
                                {align: 'center', toolbar: '#barDemo',width:'20%'}
                            ]],
                            where: {
                                date: vue.$data.date.toUTCString()
                            }
                            , parseData: function (res) {
                                var list = [];
                                for (var i = 0; i < res.list.length; i++) {
                                    var username = res.list[i].username;
                                    var id = res.list[i].userInfo.id;
                                    var password = res.list[i].password;
                                    var name = res.list[i].userInfo.name;
                                    list.push({"username": username, "id": id, "password": password, "name": name})
                                }
                                return {
                                    "code": 0,
                                    "msg": "",
                                    "count": res.total,
                                    "data": list
                                }
                            },
                            page: true
                            , limit: 5
                            , limits: [5, 10, 20, 30]
                        })
                    })
                });

            }
        })
    })

</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</html>